<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>${fileName}</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.json-viewer.js"></script>
    <link href="/css/jquery.json-viewer.css" type="text/css" rel="stylesheet">
	<link rel="icon" href="/images/logo.ico">
    <style type="text/css">
        body {
            margin: 0 30px;
            font-family: sans-serif;
        }

        p.options label {
            margin-right: 10px;
        }

        p.options input[type=checkbox] {
            vertical-align: middle;
        }

        textarea#json-input {
            width: 100%;
            height: 240px;
            font-size: 14px;
        }

        pre#json-renderer {
            display: block;
            padding: 18px;
            margin: 0 0 10px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .content {
            width: 100%;
            height: 100%;
        }

        .content-l {
            display: none;
        }

        .json-content {
            overflow: auto;
        }

        .panel-title-name {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: inherit;
            display: inline-block;
            margin-right: 28px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            function renderJson() {
                try {
                    var input = eval('(' + $('#json-input').val() + ')');
                }
                catch (error) {
                    return alert("Cannot eval JSON: " + error);
                }
                var options = {
                    collapsed: $('#collapsed').is(':checked'),
                    rootCollapsable: $('#root-collapsable').is(':checked'),
                    withQuotes: $('#with-quotes').is(':checked'),
                    withLinks: $('#with-links').is(':checked')
                };
                $('#json-renderer').jsonViewer(input, options);
            }

            $('#btn-json-viewer').click(renderJson);

            $('p.options input[type=checkbox]').click(renderJson);

            renderJson();

            var queryParams = parseQueryString(location.search)
            if (queryParams.charsetName != null && queryParams.charsetName != '' ) {
                $("#charsetNameId").val(queryParams.charsetName);
            }

            function parseQueryString(url) {
                var result = {}
                if (url.indexOf('?') > -1) {
                    var str = url.split('?')[1];
                    var temp = str.split('&');
                    for (var i = 0; i < temp.length; i++) {
                        var temp2 = temp[i].split('=');
                        result[temp2[0]] = temp2[1];
                    }
                }
                return result;
            }

            $("#charsetNameId").change(function () {
                var newCharset = $("#charsetNameId").val();

                if (newCharset != null && newCharset != '') {
                    queryParams['charsetName'] =  newCharset
                } else {
                    delete queryParams.charsetName
                }

                var path = "?";
                for (const i in queryParams) {
                    path = path + i + "=" + queryParams[i] + "&"
                }
                path = path.slice(0, path.length - 1)

                window.location.href = path
            })
        });
    </script>
</head>

<body style="height: 100vh" oncontextmenu=self.event.returnValue=false>
    <div id="wm_div_id" style="pointer-events: none !important; display: block !important"></div>
    <div class="content">
        <div class="content-l">
            <textarea id="json-input" autocomplete="off" disabled>${textData}</textarea>
        </div>
        <div class="content-r">
            <div style="display: flex;align-items: center;">
                <h4 class="panel-title-name">文件名称：${fileName}</h4>
                <p class="options">
                    <label title="折叠">
                        <input type="checkbox" id="collapsed">折叠
                    </label>
                    <label title="显示根折叠">
                        <input type="checkbox" id="root-collapsable" checked>显示根折叠
                    </label>
                    <label title="加引号">
                        <input type="checkbox" id="with-quotes">加引号
                    </label>
                    <!-- <label title="Generate anchor tags for URL values">
                    <input type="checkbox" id="with-links" checked>
                    With Links
                </label> -->
                    <label>
                        <span style="margin-left: 5px">
                            文件编码： <select id="charsetNameId" name="charsetName">
                            <option name="charsetName" value="">请选择</option>
                            <option name="charsetName" value="gbk">gbk</option>
                            <option name="charsetName" value="utf-8">utf-8</option>
                            </select>
                        </span>
                    </label>
                </p>
            </div>
            <!-- <button id="btn-json-viewer" title="run jsonViewer()">Transform to HTML</button> -->
            <div class="json-content">
                <pre id="json-renderer"></pre>
            </div>
        </div>
    </div>
    
</body>
<script src="/js/watermark.js"></script>
<script src="/js/index.js"></script>
</html>